<template>
  <div id="harmony">
    <div class="center">
      <NavTitle>
        <template #center>
          <div class="title">构建和谐社会</div>
          <div class="info">BUILDING A HARMONIOUS SOCIETY</div>
        </template>
      </NavTitle>
      <div class="introduce">
        为了贯彻党和政府关于大力发展社会公益事业的精神，促进社会主义精神文明建设，益基金会积极开展各种社会公益活动，整合社会资源，缩小贫富差距，化解社会矛盾，促进社会文明，构建和谐社会
      </div>
      <div class="lists">
        <template v-for="item in state.infoList" :key="item.title">
          <div class="list">
            <div class="cover">
              <img :src="item.cover" alt="" />
            </div>
            <div class="info">
              <div class="title">{{ item.title }}</div>
              <template v-for="childItem in item.des" :key="childItem">
                <p>{{ childItem }}</p>
              </template>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { NavTitle } from '@/components/client/public'

interface InfoListTypes {
  title: string
  des: string[]
  cover: string
}

const state = reactive({
  infoList: [] as Array<InfoListTypes>
})

const infoList = [
  {
    title: '加入我们，加入社会公益的队伍',
    des: [
      '充满着和谐和希望',
      '社会公益事业是一项崇高而伟大的事业，也是一个爱心的事业',
      '难道你能看到一双双充满期待的眼睛而无动于衷吗？'
    ],
    cover:
      'https://26814353.s61i.faiusr.com/2/AD0Ikc-kDBACGAAg87zqggYow7-55gQwxAQ4ygI.jpg.webp'
  },
  {
    title: '迈出关爱的步伐，心连心、手拉手',
    des: [
      '更加幸福、美满、和谐',
      '社会公益事业是一项崇高而伟大的事业，是社会文明进步的象征',
      '是人类的责任，是道德的善举'
    ],
    cover:
      'https://26814353.s61i.faiusr.com/2/AD0Ikc-kDBACGAAg78LqggYolNrHuAIwxAQ4ygI.jpg.webp'
  }
]

state.infoList = infoList
</script>

<style scoped lang="less">
#harmony {
  padding-top: 80px;
  .center {
    width: 1200px;
    margin: 0 auto;
    .introduce {
      width: 1104px;
      text-align: center;
      color: #666666;
      font-size: 14px;
      line-height: 2.5;
    }
    .lists {
      display: flex;
      justify-content: space-between;
      .list {
        height: 450px;
        width: 580px;
        border: 1px solid #e9e4e4;
        overflow: hidden;
        margin-top: 50px;
        &:hover {
          .info {
            margin-top: -100px;
          }
        }
        .cover {
          width: 580px;
          height: 330px;
        }
        .info {
          height: 191px;
          text-align: center;
          background-color: #fff;
          transition: all 0.3s;
          position: relative;
          margin-top: 0;
          padding-top: 40px;
          .title {
            color: #444444;
            font-size: 16px;
            margin-bottom: 20px;
          }
          p {
            font-size: 14px;
            color: #777777;
            margin-bottom: 20px;
          }
        }
      }
    }
  }
}
</style>
